<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function $$(id){
				return document.getElementById(id);
			}
			window.onload = function(){
				var cnv = $$("canvas");
				var cxt = cnv.getContext("2d");
		 
					  cxt.fillStyle = 'red';
					  cxt.fillRect(0,0,450,300);
					  cxt.translate(75,75);
					 
					  cxt.save();
					  cxt.rotate(Math.PI*2/7);
					  drawStar(cxt,40);   
					  cxt.restore();
					 
					  cxt.save();
					  cxt.translate(80,-50);
					  drawStar(cxt,10);   
					  cxt.restore();
					  cxt.save();
					  cxt.translate(110,-10);
					  drawStar(cxt,10);   
					  cxt.restore();
					  cxt.save();
					  cxt.translate(110,30);
					  drawStar(cxt,10);   
					  cxt.restore();
					  cxt.save();
					  cxt.translate(80,70);
					  drawStar(cxt,10);   
					  cxt.restore();
					}
					
				function drawStar(cxt,r){
					  cxt.save();
					  cxt.beginPath()
					  cxt.moveTo(r,0);
					  for (var i=0;i<9;i++){
					    cxt.rotate(Math.PI/5);
					    if(i%2 == 0) {
					      cxt.lineTo((r/0.525731)*0.200811,0);
					    } else {
					      cxt.lineTo(r,0);
					    }
					  }
					  cxt.closePath();
					  cxt.fillStyle="yellow";
					  cxt.fill();
					  cxt.restore();
				}
    </script>
  </head>
  <body>
    <canvas id="canvas" width="500" height="300" style="border:1px dashed gray;"></canvas>
  </body>
</html>